<!--/**
* @author xuyh0817
* @email xuyh0817@foxmail.com
* @date 2022-02-16 14:58
* @version 2.0.0
* @doc todo
* @website todo
* @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
*/
-->
<template>
  <div class="x-textarea-container" :style="styles">
    <XRenderTextarea
        v-bind="$attrs"
        v-on="$listeners"
    >
    </XRenderTextarea>
    <a-button v-bind="button" @click="clickHandler"/>
  </div>
</template>

<script>
import { COMPONENT_TYPE, CUSTOM_EVENT_TYPE } from '../../constants'
import XRenderTextarea from '../XRenderTextarea/XRenderTextarea'

export default {
  name: COMPONENT_TYPE.TEXTAREA_BUTTON,
  components: {
    XRenderTextarea
  },
  inheritAttrs: false,
  computed: {
    styles: {
      get() {
        const {attrs} = this.$attrs
        const {style} = attrs
        if (style) {
          if (typeof (style) === 'string') {
            return (new Function('return ' + style))()
          }
          if (typeof (style) === 'object') {
            return style
          }
        }
        return {}
      }
    },
    button: {
      get() {
        const {attrs} = this.$attrs
        const {button} = attrs
        if (button) {
          if (typeof (button) === 'string') {
            return (new Function('return ' + button))()
          }
          if (typeof (button) === 'object') {
            return button
          }
        }
        return {}
      }
    }
  },
  methods: {
    clickHandler() {
      const {attrs, formItem, value} = this.$attrs
      this.$emit(CUSTOM_EVENT_TYPE.CUSTOM_EVENT, {
        type: CUSTOM_EVENT_TYPE.BUTTON_CLICK_EVENT,
        compType: COMPONENT_TYPE.TEXTAREA_BUTTON,
        prop: formItem ? formItem.prop : '',
        value,
        attrs: attrs,
        formItem: formItem
      })
    }
  }
}
</script>

<style scoped lang="css">
.x-textarea-container {
  width: 100%;
  display: grid;
  grid-template-columns:auto 32px;
  place-items: start center;
  column-gap: 4px;
}
</style>
